<template>
  <div
    style="
      background-color: #fff;
      height: 100%;
      box-shadow: 2px 2px 10px 2px #ddd;
      min-height: 94vh;
    "
  >
    <!-- <div style="background-color: aqua;">诗坛右部</div> -->
    <div><RightHead @tellFather="selectEmit"></RightHead></div>
    <div
      style="height: 1px; width: 86%; margin-left: 7%; background-color: #ddd"
    ></div>
    <div v-if="selection == 0" style="margin-top: 10px">
      <Follow :follows="follows"></Follow>
    </div>
    <div v-if="selection == 1" style="margin-top: 10px">
      <Fan :fans="fans"></Fan>
    </div>
    <div v-if="selection == 2" style="margin-top: 10px">
      <Writing @tellFather="haveAdd"></Writing>
    </div>
  </div>
</template>

<script>
import RightHead from "./RightHead";
import Follow from "./Follow";
import Fan from "./Fan";
import Writing from "./Writing";
export default {
  name: "ForumRight",
  components: {
    RightHead,
    Follow,
    Fan,
    Writing,
  },
  data() {
    return {
      uid: this.$store.state.id,
      selection: 2,
      fans: [],
      follows: [],
    };
  },
  methods: {
    selectEmit(data) {
      // console.log(data);
      this.selection = data.selection;
    },
    async getFanById(uid) {
      try {
        // console.log("用户id", uid);
        let res = await this.$axios.get("/focus/selectByFid?fid=" + uid);
        let data = res.data.data;
        console.log("粉丝列表---", data);
        for (let i = 0; i < data.length; i++) {
          let user = {
            name: "",
            headImg: "",
            briefIntroduction: "",
          };
          user.name = data[i].userName;
          user.headImg =
            "http://47.108.176.163:7777/img_user_head/" + data[i].id + ".png";
          user.briefIntroduction = data[i].briefIntroduction;
          this.fans.push(user);
        }
        console.log("粉丝列表---", this.fans);
        // return data;
      } catch (error) {
        console.log("获取粉丝失败---", error);
      }
    },
    async getFollowById(uid) {
      try {
        // console.log("用户id", uid);
        let res = await this.$axios.get("/focus/selectByUid?uid=" + uid);
        let data = res.data.data;
        // console.log("关注列表---", data);

        for (let i = 0; i < data.length; i++) {
          let user = {
            name: "",
            headImg: "",
            briefIntroduction: "",
          };
          user.name = data[i].userName;
          user.headImg =
            "http://47.108.176.163:7777/img_user_head/" + data[i].id + ".png";
          user.briefIntroduction = data[i].briefIntroduction;
          this.follows.push(user);
        }
        console.log("关注列表---", this.follows);
        // return data;
      } catch (error) {
        console.log("获取关注失败---", error);
      }
    },
    haveAdd(data) {
      console.log("到右边了", data.newForum);
      this.$emit("tellFather", { newForum: data.newForum });
    },
  },
  mounted() {
    this.getFanById(this.uid);
    this.getFollowById(this.uid);
  },
};
</script>
